<template>
  <view class="ad-text-wrap" @tap.stop="tapAdv(prop.item)">
    <uni-notice-bar
      v-if="data.isShow"
      ref="notice"
      class="content-wrap"
      :speed="50"
      :single="true"
      :showIcon="true"
      :scrollable="data.scrollable"
      :text="prop.item.advContent"
      background-color="transparent"
      color="#5073f7" />
  </view>
</template>

<script lang="ts" setup>
import { handleAd } from '@/utils/util';
import { getSystemInfo } from '@/mixins/info';

interface Props {
  item: any;
}
const prop = withDefaults(defineProps<Props>(), {
  item: {} as any,
});

const info = getSystemInfo();
const data = reactive({
  isShow: false,
  scrollable: false,
});
const notice = ref();
const getStrLen = () => {
  let realLength = 0;
  const len = prop.item.advContent.length;
  let charCode = -1;
  for (var i = 0; i < len; i++) {
    charCode = prop.item.advContent.charCodeAt(i);
    if (charCode >= 0 && charCode <= 128)
      //重点
      realLength += 1.2;
    else realLength += 2;
  }
  return realLength;
};
watch(
  () => prop.item.advContent,
  () => {
    data.isShow = false;
    if (prop.item.advContent) {
      data.isShow = true;
      const len = (getStrLen() * (info.windowWidth * 7)) / 375;
      const width = info.windowWidth - (info.windowWidth * 82) / 375;
      data.scrollable = Boolean(len > width);
      console.log('1111111------ad-----', data.scrollable, len, width);
      // #ifdef H5
      nextTick(() => {
        if (['0s', 'none'].includes(notice.value?.animationDuration)) {
          notice.value?.initSize();
        }
      });
      // #endif
    }
  },
  { immediate: true, deep: true }
);

const tapAdv = (row: any) => {
  handleAd(row);
};
</script>

<style lang="scss">
.ad-text-wrap {
  position: relative;
  width: calc(100vw - 32px);
  height: 36px;
  margin: 0 16px;
  // padding: 10px 12px;
  background-color: #e5e8f6;
  border: 1px solid #b3c1f6;
  border-radius: 12px;
  box-sizing: border-box;

  .content-wrap {
    position: absolute;
    top: -4px;
    width: 100%;
    height: 36px;
    font-size: 12px;
    // #ifdef H5
    top: 0;
    // #endif
  }
}
</style>